<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title> - 主页示例</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-10">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="row row-sm text-center">
                            <div class="col-xs-6">
                                <div class="panel padder-v item">
                                    <div class="h1 text-info font-thin h1">${IndexItem.colle}</div>
                                    <span class="text-muted text-xs">集客人数</span>
                                    <div class="top text-right w-full">
                                        <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="panel padder-v item bg-info">
                                    <div class="h1 text-fff font-thin h1">${IndexItem.custo}</div>
                                    <span class="text-muted text-xs">总客户数</span>
                                    <div class="top text-right w-full">
                                        <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="panel padder-v item bg-primary">
                                    <div class="h1 text-fff font-thin h1">${IndexItem.order}</div>
                                    <span class="text-muted text-xs">总订单数</span>
                                    <div class="top text-right w-full">
                                        <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="panel padder-v item">
                                    <div class="font-thin h1">${IndexItem.compl}</div>
                                    <span class="text-muted text-xs">总投诉量</span>
                                    <div class="bottom text-left">
                                        <i class="fa fa-caret-up text-warning m-l-sm"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="ibox float-e-margins">
                           <!--  <div class="ibox-title" style="border-bottom:none;background:#fff;">
                                <h5>服务器状态</h5>
                            </div>
                            <div class="ibox-content" style="border-top:none;">
                                <div id="flot-line-chart-moving" style="height:217px;">
                                </div>
                            </div> -->
                    <div class="ibox-title">
                        <h5>客户统计折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="echarts" id="container2"></div>
                    </div>
       
                            
                            
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9" style="padding-right:0;">
                        <div class="ibox float-e-margins">
                        
                            <div class="ibox-title" style="border-bottom:none;background:#fff;">
                                <h5>往年数据</h5>
                            </div>
                            <div class="ibox-content" style="border-top:none;">
                              <div class="echarts" id="container4"></div>
                            </div>
                            
                            
                        </div>
                    </div>
                    <div class="col-sm-3" style="padding-left:0;">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content" style="border-top:none;background-color:#e4eaec;">
                                <h5>客户转化率</h5>
                                <div class="progress progress-striped active">
                                    <div style="width: ${IndexItem.yescolle}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar">
                                        <span class="sr-only"></span>
                                    </div>
                                </div>
                                <h5>客户流失率</h5>
                                <div class="progress progress-striped active">
                                    <div style="width: ${IndexItem.nocolle}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-warning">
                                        <span class="sr-only"></span>
                                    </div>
                                </div>
                                <h5>订单完成率</h5>
                                <div class="progress progress-striped active">
                                    <div style="width: ${IndexItem.yesorder}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar .progress-bar-danger">
                                        <span class="sr-only"></span>
                                    </div>
                                </div>
                                <h5>商品退货率</h5>
                                <div class="progress progress-striped active">
                                    <div style="width:  ${IndexItem.returnlv}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-info">
                                        <span class="sr-only"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <div class="ibox float-e-margins">
                        <div class="" id="ibox-content">

                            <div id="vertical-timeline" class="vertical-container light-timeline">
                                
<c:forEach items="${IndexItem.tousu}" var="me" varStatus="status">
              
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon navy-bg">
                                        <i class="fa fa-briefcase"></i>
                                    </div>

                                    <div class="vertical-timeline-content">
                                        <h2>${me.com_name }</h2>
                                        <p>${me.com_describe }
                                        </p>
                                        <a href="#" class="btn btn-sm btn-primary"> 更多信息</a>
                                        <span class="vertical-date">
                                    待处理 <br>
                                    <small>${me.com_date }</small>
                                </span>
                                    </div>
                                </div>
</c:forEach>
                            
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="ibox">
                            <div class="ibox-title">
                                <h5>所有项目</h5>
                            </div>
                            <div class="ibox-content">
                                
                                <div class="project-list">
                                    <table class="table table-hover">
                                        <tbody>
                                        
<c:forEach items="${IndexItem.jike}" var="me" varStatus="status">
                                            <tr>
                                                <td class="project-status">
                                                    <span class="label label-primary">进行中
                                                </span></td>
                                                <td class="project-title">
                                                    <a href="project_detail.html">${me.for_name }</a>
                                                    <br>
                                                    <small>创建于 ${me.for_time }</small>
                                                </td>
                                                <td class="project-completion">
                                                        <small>当前进度： ${me.for_change }%</small>
                                                        <div class="progress progress-mini">
                                                            <div style="width: ${me.for_change }%;" class="progress-bar"></div>
                                                        </div>
                                                </td>
                                                <td class="project-people">
                                               <%--  ${me.for_id} --%>
                                                </td>
                                                <td class="project-actions">
                                                    <a href="huoketwoformse?forid=${me.for_id}" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
                                                    </td>
                                            </tr>
</c:forEach>
                                          
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>任务列表</h5>
                    </div>
                    <div class="ibox-content">
                        <ul class="todo-list m-t small-list ui-sortable">
                        
<c:forEach items="${IndexItem.users}" var="me" varStatus="status">
                           <li>
                                <a href="#" class="check-link"><i class="fa fa-square-o"></i> </a>
                                <span class="m-l-xs">${me.use_name}  </span></br>
                                <small class="label label-primary"><i class="fa fa-clock-o"></i> ${me.us_phone}</small>
                                <span class="m-l-xs">  ${me.rol_name}</span>
                            </li>
                       
</c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
    <!-- Flot -->
    <script src="js/plugins/flot/jquery.flot.js"></script>
    <script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="js/plugins/flot/jquery.flot.pie.js"></script>
    <!-- 自定义js -->
    <script src="js/content.js"></script>
    <!--flotdemo-->
   
    
     <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
	<script type="text/javascript">
	
					
					
					
					var customer = ${CustomerCount};
					
					var cusCount =[];
					var date = []; 
					for(var i = 0; i<customer.length;i++){
						cusCount.push(customer[i].count);	
						date.push(customer[i].date);
					}
					
					//条形图
					//月度客户统计数量
Highcharts.chart('container2', {
    chart: {
        type: 'line'
    },
    title: {
        text: '每月集客人数'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories:  date
    },
    yAxis: {
        title: {
            text: '月 (人)'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: '每月集客人数',
        data: cusCount
    }]
});
					
//月度订单成交额与次数统计
var money = ${OrderMoney};
var orderdate=[];//横坐标
var ordermoney =[];
var ordercount = [];
for(var i = 0; i<money.length;i++){
	ordercount.push(money[i].count);	
	orderdate.push(money[i].date);
	ordermoney.push(money[i].money/1000);
}

Highcharts.chart('container4', {
chart: {
    type: 'bar'
},
title: {
    text: '订单成交量与金额分布'
},
subtitle: {
    text: ''
},
xAxis: {
    categories: orderdate,
    title: {
        text: null
    }
},
yAxis: {
    min: 0,
    title: {
        text: '月（k元/次）',
        align: 'high'
    },
    labels: {
        overflow: 'justify'
    }
},
tooltip: {
    valueSuffix: ''
},
plotOptions: {
    bar: {
        dataLabels: {
            enabled: true
        }
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
},
credits: {
    enabled: false
},
series: [{
    name: '金额',
    data: ordermoney
}, {
    name: '成交量',
    data: ordercount
}]
});
	</script>
</body>

</html>
